<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  isMp: -1,
  isMa: -1,
  isSms: -1,
  maId: '',
  mpId: '',
  smsId: '',
  maUrl: '',
  mpUrl: '',
  ma: {
    name: '',
    content: '',
    code: '',
  },
  mp: {
    name: '',
    content: '',
    code: '',
  },
  sms: {
    name: '',
    content: '',
    code: '',
  },
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = {
        id: props.id,
        maId: detail.maId,
        mpId: detail.mpId,
        smsId: detail.smsId,
      }
      post(
        { url: '/server-base/admin/notice/template/update', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          if (code == 200) {
            emit('update:show', false)
            emit('confirm')
          }
          done(code == 200)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-base/admin/notice/template/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
  })
}
onMounted(() => {
  if (props.id) getInfo()
})
const tabs = computed(() => {
  const list = [
    { name: '公众号模版消息', value: 'isMp' },
    { name: '小程序订阅消息', value: 'isMa' },
    { name: '短信', value: 'isSms' },
  ]
  const res = list.filter(f => detail[f.value] != -1)
  active.value = res?.[0]?.value || 'isMa'
  return res
})
const active = ref('')
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="700px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-tabs v-model:active-key="active">
          <a-tab-pane v-for="item in tabs" :title="item.name" :key="item.value" />
        </a-tabs>
        <template v-if="active == 'isMa'">
          <a-form-item label="模板名称">
            <a-input v-model="detail.ma.name" disabled />
          </a-form-item>
          <a-form-item label="模板code">
            <a-input v-model="detail.ma.code" disabled />
          </a-form-item>
          <a-form-item label="模板ID" field="maId" :rules="[{ required: true, message: '请输入模版ID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.maId" placeholder="请输入模版ID" />
          </a-form-item>
          <a-form-item label="模版消息跳转地址" field="maUrl" :rules="[{ required: false, message: '请输入模版消息跳转地址' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.maUrl" placeholder="请输入模版消息跳转地址" />
          </a-form-item>
          <a-form-item label="模板内容">
            <a-textarea v-model="detail.ma.content" disabled />
          </a-form-item>
        </template>
        <template v-else-if="active == 'isMp'">
          <a-form-item label="模板名称">
            <a-input v-model="detail.mp.name" disabled />
          </a-form-item>
          <a-form-item label="模板code">
            <a-input v-model="detail.mp.code" disabled />
          </a-form-item>
          <a-form-item label="模板ID" field="mpId" :rules="[{ required: true, message: '请输入模版ID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.mpId" placeholder="请输入模版ID" />
          </a-form-item>
          <a-form-item label="模版消息跳转地址" field="mpUrl" :rules="[{ required: false, message: '请输入模版消息跳转地址' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.mpUrl" placeholder="请输入模版消息跳转地址" />
          </a-form-item>
          <a-form-item label="模板内容">
            <a-textarea v-model="detail.mp.content" disabled />
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item label="模板名称">
            <a-input v-model="detail.sms.name" disabled />
          </a-form-item>
          <a-form-item label="模板code">
            <a-input v-model="detail.sms.code" disabled />
          </a-form-item>
          <a-form-item label="模板ID" field="smsId" :rules="[{ required: true, message: '请输入模版ID' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.smsId" placeholder="请输入模版ID" />
          </a-form-item>
          <a-form-item label="模板内容">
            <a-textarea v-model="detail.sms.content" disabled />
          </a-form-item>
        </template>
      </a-form>
    </div>
  </CModal>
</template>
<style lang="less" scoped></style>
